<template>
  <div class="dark-switch">
    <el-switch
      v-model="value1"
      active-text="☀"
      inactive-text="🌙"
      inline-prompt
      style="--el-switch-off-color: #5c5c5c"
      @change="handleToggle"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Sunny, Moon } from "@element-plus/icons-vue";
const value1 = ref(true);
// import { useDark, useToggle } from "@vueuse/core";

// const isDark = useDark({
//   storageKey: "theme-appearance",
//   // valueDark: "dark",
//   // valueLight: "light",
// });
// const toggleDark = () => useToggle(isDark);

onMounted(() => {
  initTheme();
});
function initTheme() {
  let theme = localStorage.getItem("theme");
  if (theme !== null) {
    if (isDark() ? "dark" : "light" !== theme) {
      toggleDark();
    }
  } else {
    localStorage.setItem("theme", "light");
  }
}
function toggleDark() {
  document.documentElement.classList.toggle("dark");
}
function isDark() {
  return document.documentElement.classList.contains("dark");
}
window.addEventListener("resize", (_) => {
  // initTheme()
  // console.log('悲伤的dark', isDark())
});
const handleToggle = (e) => {
  // setTimeout(() => {
  toggleDark();
  // }, 150);
  if (isDark()) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
};
</script>
<style lang="scss"></style>
